<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制线框立方体</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
      canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec3 aPosition; // 位置坐标，注意这是3维坐标,而不是2维坐标
      void main() {
        float radian = radians(10.0); // 旋转角度
        float sinb = sin(radian);
        float cosb = cos(radian);
        // 绕x轴旋转的4维旋转矩阵
        mat4 rotatex = mat4(
          1.0, 0.0, 0.0, 0.0,
          0.0, cosb, -sinb, 0.0,
          0.0, sinb, cosb, 0.0,
          0.0, 0.0, 0.0, 1.0 // 4维齐次坐标
        );
        // 绕y轴旋转的4维旋转矩阵
        mat4 rotatey = mat4(
          cosb, 0.0, -sinb, 0.0,
          0.0, 1.0, 0.0, 0.0,
          sinb, 0.0, cosb, 0.0,
          0.0, 0.0, 0.0, 1.0 // 4维齐次坐标
        );

        gl_Position = rotatex * rotatey * vec4(aPosition, 1.0);  // 正确应用旋转矩阵
        gl_PointSize = 10.0; // 设置点的大小
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
      }
    </script>
    <script type="module">
      import initShaders from "../utils/initShader.js";

      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }

      const program = initShaders(gl);
      /*
        立方体的8个点坐标
        [
          0.5, 0.5, 0.5, // 右上前
          -0.5, 0.5, 0.5, // 左上前
          -0.5, -0.5, 0.5, // 左下前
          0.5, -0.5, 0.5, // 右下前

          0.5, 0.5, -0.5, // 右上后
          0.5, -0.5, -0.5, // 右下后
          -0.5, -0.5, -0.5, // 左下后
          -0.5, 0.5, -0.5, // 左上后
          // 以下是立方体前后两个表面之间的线段
          0.5, 0.5, 0.5, // 右上前
          0.5, 0.5, -0.5, // 右上后
          -0.5, 0.5, 0.5, // 左上前
          -0.5, 0.5, -0.5, // 左上后
           -0.5, -0.5, 0.5, // 左下前
          -0.5, -0.5, -0.5, // 左下后
          0.5, -0.5, 0.5, //右下前
          0.5, -0.5, -0.5, // 右下后
        ]
      */
      // 位置坐标
      const vertices = new Float32Array([
        0.5,
        0.5,
        0.5, // 右上前
        -0.5,
        0.5,
        0.5, // 左上前
        -0.5,
        -0.5,
        0.5, // 左下前
        0.5,
        -0.5,
        0.5, // 右下前

        0.5,
        0.5,
        -0.5, // 右上后
        0.5,
        -0.5,
        -0.5, // 右下后
        -0.5,
        -0.5,
        -0.5, // 左下后
        -0.5,
        0.5,
        -0.5, // 左上后

        0.5,
        0.5,
        0.5, // 右上前
        0.5,
        0.5,
        -0.5, // 右上后
        -0.5,
        0.5,
        0.5, // 左上前
        -0.5,
        0.5,
        -0.5, // 左上后
        -0.5,
        -0.5,
        0.5, // 左下前
        -0.5,
        -0.5,
        -0.5, // 左下后
        0.5,
        -0.5,
        0.5, //右下前
        0.5,
        -0.5,
        -0.5, // 右下后
      ]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 获取变量的索引
      const aPosition = gl.getAttribLocation(program, "aPosition");

      gl.vertexAttribPointer(
        aPosition,
        3, // 每个点有3个坐标
        gl.FLOAT,
        false,
        3 * Float32Array.BYTES_PER_ELEMENT,
        0
      );
      gl.enableVertexAttribArray(aPosition); // 启用位置坐标

      // 绘制点
      gl.drawArrays(gl.POINTS, 0, 4); // 绘制4个点
      gl.drawArrays(gl.LINE_LOOP, 0, 4); // 绘制前面4个点
      gl.drawArrays(gl.POINTS, 4, 4); // 绘制4个点
      gl.drawArrays(gl.LINE_LOOP, 4, 4); // 绘制后面的4个点

      gl.drawArrays(gl.LINES, 8, 8); // 绘制前后两个表面之间的线段
    </script>
  </body>
</html>
